<template>
  <div class="fangke">
    <Top>我是访客</Top>
    <img src="../assets/bg2.jpg" alt id="bg2" />
    <div class="msg">
      <img src="../assets/msg.png" alt />
      <div>应疫情防控要求，请出入社区人员进行健康登记。个人信息不会对外泄露，请如实填写。</div>
    </div>
    <div class="basemsg">
      <ul style="padding-left:1rem;">
        <h1 style="font-size:1rem;">
          <li>基本信息</li>
        </h1>
      </ul>
      <form action="http://localhost:3000/noofwrite" method="post" target="_block">
        <table>
          <tr>
            <td>
              姓名:
              <input type="text" name="username" autocomplete="off" v-model='username'/>
            </td>
          </tr>
          <tr>
            <td>
              手机号码:
              <input type="text" name="phonenum" autocomplete="off" v-model='phonenum'/>
            </td>
          </tr>
          <tr>
            <td>
              体温是否正常:
              <input type="radio" id="normal" name="temperature" value="true" checked />
              <label for="normal">正常</label>

              <input type="radio" id="hot" name="temperature" value="false" />
              <label for="hot">发热</label>
            </td>
          </tr>
        </table>
        <input style='display:none' type="radio" name="situation" id="in" value="true" />
        <button ref='btnin' @click='reg'>
          <label for="in">申请进入</label>
        </button>
        <input style='display:none' type="radio" name="situation" id="out" value="false" />
        <button ref='btnon' @click='reg'>
          <label for="out">申请离开</label>
        </button>
      </form>
    </div>
  </div>
</template>
<style scoped>
button {
  width: 40%;
  padding: 0.5rem;
  margin: 1.5rem 0.8rem;
  font-size: 0.7rem;
  color: white;
  outline: none;
  border: none;
  border-radius: 0.8rem;
}
button:nth-of-type(1) {
  background-color: rgb(48, 152, 251);
}
button:nth-of-type(2) {
  background-color: rgb(37, 182, 167);
}
table {
  background-color: white;
  font-size: 0.8rem;
  width: 100%;
  box-shadow: 1px 0px 1px gray, -2px 0px 8px gray;
  padding-left: 0.5rem;
}
table td {
  border-bottom: 0.1rem solid rgb(238, 238, 238);
  padding: 0.5rem 0;
}
td:nth-of-type(6) {
  border: 1px solid red;
}
table input[type="text"] {
  width: 10rem;
  height: 0.9rem;
  font-size: 0.9rem;
  border: none;
  outline: none;
  background: none;
}

input[type="radio"] {
  display: inline-block;
  border: 1px solid;
  width: 0.5rem;
  height: 0.5rem;
}
.basemsg {
  width: 90%;
  margin: auto;
}
.user {
  background-color: rgb(245, 245, 245);
}
#bg2 {
  width: 100%;
  position: relative;
  top: 2rem;
}
.msg {
  width: 90%;
  background-color: white;
  position: relative;
  z-index: 1;
  margin: auto;
  display: flex;
  justify-content: space-around;
}
.msg img {
  width: 1.8rem;
  height: 2rem;
  margin: 0.8rem 0 0.8rem 0.8rem;
}
.msg div {
  margin: 0.5rem;
  font-size: 0.6rem;
}
</style>
<script>
import Top from "../components/HelloWorld";
export default {
  name: "fangke",
  data(){
    return{
      idcard:'',
      username:'',
      species:'',
      classname:'',
      phonenum:''
    }
  },
  methods:{
    reg(){
      var regphonenum=new RegExp('^1[3456789]\\d{9}$')
      if(this.username.length==0){
        this.$refs.btnin.type='button';
        this.$refs.btnon.type='button';
        alert('请输入姓名')
        return
      }else if(regphonenum.test(this.phonenum)==false){
        this.$refs.btnin.type='button';
        this.$refs.btnon.type='button';
        alert('请输入正确的手机号')
        return
      }else{
        this.$refs.btnin.type='submit';
        this.$refs.btnon.type='submit';
      }
    }
  },
  components: { Top }
};
</script>